<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-popup title="Build stack from recipe" on-close="importStackController.cancel()">
  <div class="import-stack">
    <ng-form name="importStackForm">
    <ui-codemirror ui-codemirror="importStackController.editorOptions"
                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 1000, 'blur': 0 }, allowInvalid: true }"
                   ng-model="importStackController.recipeScript"
                   placeholder="test"
                   ng-change="importStackController.onRecipeChange()"></ui-codemirror>
    <che-input che-form="importStackForm"
               che-name="recipe"
               type="hidden"
               ng-model="importStackController.recipeScript"
               custom-validator="importStackController.isRecipeValid()"
               ng-required>
      <div class="error-message">
        <div ng-message></div>
        <div ng-message="required" ng-if="importStackForm.$dirty">The recipe is required.</div>
        <div ng-message="customValidator" ng-if="importStackForm.$dirty">{{importStackController.recipeValidationError}}</div>
      </div>
    </che-input>
    </ng-form>
    <div layout="row" layout-align="start start">
      <div class="recipe-docs-link">
        <a ng-href="{{importStackController.stackDocsUrl}}" target="_blank">Custom stack documentation</a>
      </div>
      <div flex></div>
      <che-button-notice che-button-title="Cancel"
                         ng-click="importStackController.cancel()">
      </che-button-notice>
      <che-button-primary che-button-title="Ok"
                          ng-disabled="!importStackController.isRecipeValid()"
                          ng-click="importStackController.onImport()">
      </che-button-primary>
    </div>
  </div>
</che-popup>
